<!-- 首页规则弹窗组件 -->
<!-- XXX 已弃用，考虑删除 -->
<template>
  <div
    class="container"
    @click.prevent
  >
    <!-- 规则 -->
    <div class="rule-dialog">
      <!-- 标题 -->
      <div class="title">
        活动规则
      </div>
      <!-- 内容 -->
      <div class="content">
        <text class="heading">
          一、活动说明
        </text>
        <text class="paragraph">
          参与本次【嗨喵51狂欢季】活动（以下简称“本活动”）前，请用户详细阅读活动规则及相关条款。凡参与本次活动，则视为用户已阅读、理解并同意活动规则及注意事项全部内容。
        </text>
        <text class="heading">
          二、活动时间
        </text>
        <text class="paragraph">
          2023年4月28日 18:00:00-2023年5月31日 24:00:00，本活动所有时间均以北京时间为准。。
        </text>

        <text class="heading">
          三、活动参与规则
        </text>
        <text class="paragraph">
          1.本活动包含“荣耀冠军赛”和“嗨喵总动员”两个板块，活动期间，用户可以通过完成特定的活动任务，参与“荣耀冠军赛”和“嗨喵总动员”两个板块的相应活动赢取相应的活动奖励。“荣耀冠军赛”中的“红包口袋流水榜单”的用户排名规则将按照活动期间总场次的有效流水金额高低来决定名次高低，若有效流水金额相同，则按其总的活动参与人数多少来决定名次；“荣耀冠军赛”中的“互动影响力榜单”的排名规则将按照活动期间邀请好友参与的人数多少来决定名次高低，若邀请的人数相同，按照所邀请人数的总活动场次的总红包口袋流水金额大小来决定名次。
        </text>
        <text class="paragraph">
          2.红包口袋有效流水是指使用嗨喵大屏互动系统真实充值到红包口袋账户，并通过红包雨、转一转、扭一扭、幸运小转盘、开宝箱、红包墙等游戏发放给活动现场参与用户（红包雨游戏、开宝箱游戏、红包墙游戏至少5位现场活动来宾参与领取），如用户充值到红包口袋后，不通过红包类游戏发放，直接通过系统后台提现，则该部分提现金额将不计入红包口袋有效流水金额中。
        </text>
        <text class="paragraph">
          3.在“嗨喵总动员”板块活动中，您可将活动页面分享给好友（具体分享方式以平台内实际提供的分享方式为准），被您邀请的好友通过您的分享链接进入活动小程序页面并成功领取奖励的喵豆即视为您邀请好友成功。您可在【邀请记录】中查看被您成功邀请的好友。为保证系统稳定，每日被您成功邀请的嗨喵好友不得超过100位（包括100位）。
        </text>
        <text class="paragraph">
          4.活动期间，每个用户只能被成功邀请一次，且仅可领取一次被邀请喵豆奖励。同一个登录账号、同一个手机号、同一个设备或同一提现账户等与用户身份相关的信息，其中任意一项或数项存在相同、相似、通过特定标记形成批量信息，或其他非真实有效等情形的，都视为同一个用户，按活动规则中的同一用户处理。
        </text>
        <text class="paragraph">
          5. 新用户指嗨喵平台的新用户，即同一用户在参与本活动前，未曾注册登录过嗨喵账户。
        </text>
        <text class="paragraph">
          6. 如您邀请新用户参与本次活动，则邀请奖励将在新用户使用嗨喵大屏互动完成一场有效活动之后发放到您的活动账户。且新用户在使用嗨喵大屏互动完成一场有效活动后，其作为有效邀请用户才计入“互动影响力榜单”中。
        </text>
        <text class="paragraph">
          7. 您完成了平台各项任务所获得的喵豆奖励均可用于“嗨喵总动员”中的抽奖游戏，按照一定比例兑换抽奖机会，如果您抽中实物奖励，请及时联系嗨喵客服人员，并留下您的联系方式和地址，我们将在活动结束后，统一安排邮寄发放。
        </text>
        <text class="heading">
          四、注意事项：
        </text>
        <text class="paragraph">
          1.用户不得以任何不正当手段或舞弊方式参与本活动。一经发现，本平台有权采取限制登录、封禁账号、撤销活动资格、限制提现、账号金额清零、限制再次注册使用等措施，亦有权收回用户已领取的现金红包、追讨已提现的金额，并保留追究该用户责任的权利。如因此给用户造成损失，本平台不进行任何赔偿或补偿。不正当手段及舞弊行为包括但不限于：下载非官方客户端；使用模拟器、插件、外挂等非法工具扫码、下载、安装、注册、登录、赠与、领取现金红包、提现；注册多个账号；篡改设备数据；恶意牟利等扰乱平台秩序；使用插件、外挂、系统或第三方工具对本平台及本活动进行干扰、破坏、修改或施加其他影响及本平台认为的其他不正当手段。
        </text>
        <text class="paragraph">
          2. 本平台依法运营此次活动，如因不可抗力、情势变更、相关政策变动、政府机关指令要求等原因导致本次活动调整、暂停举办或无法进行的，本平台有权随时决定修改、暂停、取消或终止本活动，并无需为此承担任何法律责任。
        </text>
        <text class="paragraph">
          3. 如因第三方通过各种不当手段攻击、篡改，对本平台及本次活动进行干扰、破坏、修改或施加其他影响或系统故障，致使领取现金红包发放、提现等发生错误、用户无法参与或参与失败的，本平台无需为此承担任何法律责任。
        </text>
        <text class="paragraph">
          4. 活动期间，因用户操作不当或用户所在地区网络故障、支付平台网络故障、电信运营商故障、第三方其他平台限制等非本平台所能控制的原因导致的用户无法参与活动，或参与失败，本平台无需为此承担任何法律责任。
        </text>
        <text class="paragraph">
          5. 请用户务必通过嗨喵官方指定活动小程序客户端参与本次活动。任何人或第三方以本平台的名义宣称或从事类似活动或恶意发放、转让现金红包、恶意通知用户中奖、领取红包、欺诈等造成用户损失的，本平台无需为此承担任何法律责任。
        </text>
        <text class="paragraph">
          6.任何人不应利用本次活动进行博彩、洗钱或其他违法行为。对于本平台用户，一经发现，本平台有权取消此用户参与本次活动的资格、收回所获现金红包或相关奖品。如其行为构成犯罪，本平台有权移交相应司法机关处理。如因其行为给本平台造成损失，同时应当承担赔偿责任。
        </text>

        <text class="heading">
          7. 本活动与Apple lnc.无关。
        </text>
        <text class="heading">
          五、奖励说明：
        </text>
        <text class="paragraph">
          1. 您可以通过完成活动中的任务来参与榜单评比、抽奖游戏，以此获得平台向您提供的现金红包、实物奖励。
        </text>
        <text class="paragraph">
          2. 本活动中领取的现金红包将自动发放到您的嗨喵APP个人账户，您可通过登录嗨喵APP“我的－我的余额－提现”按钮进行提现操作。
        </text>
        <text class="paragraph">
          3. 如果您在提现截止时间2023年6月30日24点前未进行提现，则本活动此前向您发放的奖励将过期，视为您自愿放弃您账户中的奖励，您的嗨喵APP个人账户中在本次活动中获得现金奖励部分可能会被清零。
        </text>
        <text class="paragraph">
          4. 如果我们发现或有理由认为您存在造假等违规操作，我们有权阻止您使用（领取提现现金红包）以及取消您获得的各项实物奖励，具体可参考活动规则“注意事项”。
        </text>
        <text class="paragraph">
          5. 本次活动中的奖品及数量分别如下所示：
        </text>
        <image
          class="rule-img"
          src="/static/images/common/index-rule.png"
          alt=""
          @click="previewImg"
        />
      </div>
    </div>
    <!-- 关闭按钮 -->
    <div
      class="close-btn"
      @click="close"
    >
      <image
        class="close-btn-img"
        src="@/static/icons/common/close.png"
        alt=""
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { usePopup } from '@/stores/popup';

const close = () => {
  const { setHomePopupType } = usePopup();
  setHomePopupType('no');
};

const previewImg = () => {
  uni.previewImage({
    urls: ['https://ustatic.hudongmiao.com/joymew-host-contest/index-rule.png'],
    current: 'https://ustatic.hudongmiao.com/joymew-host-contest/index-rule.png',
  });
};
</script>

<style lang="scss" scoped>
.container {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;

  width: 100vw;
  height: 100vh;

  background-color: rgba($color: #000, $alpha: 60%);

  display: grid;
  grid-template:
    '.' 231px
    "ruleDialog" 350px
    '.' 20px
    "closeBtn" 48px;
  row-gap: 20px;
  align-items: center;
  justify-items: center;

  .rule-dialog {
    grid-area: ruleDialog;

    width: calc(73.8462vw - 20px);
    height: 365px;
    overflow: scroll;
    overflow-x: hidden;

    background-color: #fff;
    border-radius: 16px;

    padding: 10px 20px;
    display: grid;
    display: flex;
    flex-direction: column;
    align-items: center;

    // 隐藏滚动条
    &::-webkit-scrollbar {
      display: none;
    }

    // 标题
    .title {
      width: 202px;
      height: 20px;

      font-size: 17px;
      color: #E86523;
      text-align: center;
    }

    // 内容
    .content {
      margin-top: 20px;

      width: 100%;

      padding: 10px;
      display: flex;
      flex-direction: column;

      font-size: 15px;
      line-height: 27px;
      color: #333;
      text-align: justify;

      .heading {
        margin-top: 5px;

        font-weight: 600;
      }

      .paragraph {
        margin-top: 5px;

        display: block;
      }

      .rule-img {
        width: 100%;
      }
    }

  }

  // 关闭按钮
  .close-btn {
    grid-area: closeBtn;
    align-self: self-start;

    width: 47px;
    height: 47px;

    .close-btn-img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
